<template>
  <scroll-view @scrolltolower="onScrolltolower" class="scroll-view" scroll-y>
    <view class="historicalViewing" v-for="item in propsOptions.list" :key="item.id">
      <view class="historicalViewing-item">
        <image class="historicalViewing-item-image" :src="item.image"></image>
        <text class="historicalViewing-item-progress">{{ item.progress }}</text>
      </view>
      <view class="historicalViewing-item-text">
        <view class="historicalViewing-item-text-title">{{ item.title }}</view>
        <view class="historicalViewing-item-text-describe">已观看{{ item.percentage }}%</view>
      </view>
    </view>
    <uni-load-more :status="propsOptions.loadStatus"></uni-load-more>
  </scroll-view>
</template>

<script setup lang="ts">
// 热门推荐
import type { NVideoMoreListProps } from '@/components/types/types'
import { reactive } from 'vue'

const getRecommendedCourse = (options: any) => {
  console.log('下一页')
  propsOptions.currentPage!++
  setTimeout(() => {
    propsOptions.list = [
      ...propsOptions.list!,
      {
        id: '1',
        title: '课程标题',
        progress: '20:50',
        percentage: '20',
        image:
          'https://ts1.cn.mm.bing.net/th/id/R-C.c4a61dd4df197e12055eba611b9e6337?rik=mWmkGXADBB2hUA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50066%2f7706.jpg_wh860.jpg&ehk=Dm%2bzKOFKX31KRvQbuTlKw77nJQBu7lxDn7J%2bn0YiyJg%3d&risl=&pid=ImgRaw&r=0',
      },
    ]
    propsOptions.loadStatus = 'more'
  }, 1000)
}

// 自定义滚动到底部被触发
const onScrolltolower = () => {
  console.log('加载更多')
  propsOptions.loadStatus = 'loading'
  getRecommendedCourse(propsOptions)
}
const propsOptions = reactive({
  loadStatus: 'more',
  currentPage: 1,
  pageSize: 10,
  list: [
    {
      id: '1',
      title: '课程标题',
      progress: '20:50',
      percentage: '20',
      image:
        'https://ts1.cn.mm.bing.net/th/id/R-C.c4a61dd4df197e12055eba611b9e6337?rik=mWmkGXADBB2hUA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50066%2f7706.jpg_wh860.jpg&ehk=Dm%2bzKOFKX31KRvQbuTlKw77nJQBu7lxDn7J%2bn0YiyJg%3d&risl=&pid=ImgRaw&r=0',
    },
    {
      id: '1',
      title: '课程标题',
      progress: '20:50',
      percentage: '20',
      image:
        'https://ts1.cn.mm.bing.net/th/id/R-C.c4a61dd4df197e12055eba611b9e6337?rik=mWmkGXADBB2hUA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50066%2f7706.jpg_wh860.jpg&ehk=Dm%2bzKOFKX31KRvQbuTlKw77nJQBu7lxDn7J%2bn0YiyJg%3d&risl=&pid=ImgRaw&r=0',
    },
    {
      id: '1',
      title: '课程标题',
      progress: '20:50',
      percentage: '20',
      image:
        'https://ts1.cn.mm.bing.net/th/id/R-C.c4a61dd4df197e12055eba611b9e6337?rik=mWmkGXADBB2hUA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50066%2f7706.jpg_wh860.jpg&ehk=Dm%2bzKOFKX31KRvQbuTlKw77nJQBu7lxDn7J%2bn0YiyJg%3d&risl=&pid=ImgRaw&r=0',
    },
    {
      id: '1',
      title: '课程标题',
      progress: '20:50',
      percentage: '20',
      image:
        'https://ts1.cn.mm.bing.net/th/id/R-C.c4a61dd4df197e12055eba611b9e6337?rik=mWmkGXADBB2hUA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50066%2f7706.jpg_wh860.jpg&ehk=Dm%2bzKOFKX31KRvQbuTlKw77nJQBu7lxDn7J%2bn0YiyJg%3d&risl=&pid=ImgRaw&r=0',
    },
    {
      id: '1',
      title: '课程标题',
      progress: '20:50',
      percentage: '20',
      image:
        'https://ts1.cn.mm.bing.net/th/id/R-C.c4a61dd4df197e12055eba611b9e6337?rik=mWmkGXADBB2hUA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50066%2f7706.jpg_wh860.jpg&ehk=Dm%2bzKOFKX31KRvQbuTlKw77nJQBu7lxDn7J%2bn0YiyJg%3d&risl=&pid=ImgRaw&r=0',
    },
    {
      id: '1',
      title: '课程标题',
      progress: '20:50',
      percentage: '20',
      image:
        'https://ts1.cn.mm.bing.net/th/id/R-C.c4a61dd4df197e12055eba611b9e6337?rik=mWmkGXADBB2hUA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50066%2f7706.jpg_wh860.jpg&ehk=Dm%2bzKOFKX31KRvQbuTlKw77nJQBu7lxDn7J%2bn0YiyJg%3d&risl=&pid=ImgRaw&r=0',
    },
    {
      id: '1',
      title: '课程标题',
      progress: '20:50',
      percentage: '20',
      image:
        'https://ts1.cn.mm.bing.net/th/id/R-C.c4a61dd4df197e12055eba611b9e6337?rik=mWmkGXADBB2hUA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50066%2f7706.jpg_wh860.jpg&ehk=Dm%2bzKOFKX31KRvQbuTlKw77nJQBu7lxDn7J%2bn0YiyJg%3d&risl=&pid=ImgRaw&r=0',
    },
    {
      id: '1',
      title: '课程标题',
      progress: '20:50',
      percentage: '20',
      image:
        'https://ts1.cn.mm.bing.net/th/id/R-C.c4a61dd4df197e12055eba611b9e6337?rik=mWmkGXADBB2hUA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50066%2f7706.jpg_wh860.jpg&ehk=Dm%2bzKOFKX31KRvQbuTlKw77nJQBu7lxDn7J%2bn0YiyJg%3d&risl=&pid=ImgRaw&r=0',
    },
    {
      id: '1',
      title: '课程标题',
      progress: '20:50',
      percentage: '20',
      image:
        'https://ts1.cn.mm.bing.net/th/id/R-C.c4a61dd4df197e12055eba611b9e6337?rik=mWmkGXADBB2hUA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50066%2f7706.jpg_wh860.jpg&ehk=Dm%2bzKOFKX31KRvQbuTlKw77nJQBu7lxDn7J%2bn0YiyJg%3d&risl=&pid=ImgRaw&r=0',
    },
    {
      id: '1',
      title: '课程标题',
      progress: '20:50',
      percentage: '20',
      image:
        'https://ts1.cn.mm.bing.net/th/id/R-C.c4a61dd4df197e12055eba611b9e6337?rik=mWmkGXADBB2hUA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50066%2f7706.jpg_wh860.jpg&ehk=Dm%2bzKOFKX31KRvQbuTlKw77nJQBu7lxDn7J%2bn0YiyJg%3d&risl=&pid=ImgRaw&r=0',
    },
  ],
})
</script>

<style scoped lang="scss">
.scroll-view {
  background: linear-gradient(to bottom, #f1dade 0%, #ffffff 20%);
  height: 100%;
}

.historicalViewing {
  display: flex;
  align-items: center;
  padding: 0 20rpx;

  .historicalViewing-item {
    padding: 20rpx 0;
    position: relative;
    .historicalViewing-item-image {
      width: 300rpx;
      height: 180rpx;
      border-radius: 10rpx;
    }
    .historicalViewing-item-progress {
      display: block;
      position: absolute;
      bottom: 20rpx;
      right: 5rpx;
      color: #f6f1f1;
      font-size: 24rpx;
    }
  }

  .historicalViewing-item-text {
    padding: 0 20rpx;
    .historicalViewing-item-text-title {
      padding: 20rpx 0;
      font-size: 26rpx;
      color: #333;
    }
    .historicalViewing-item-text-describe {
      font-size: 24rpx;
      color: #999;
    }
  }
}
</style>
